<template>
  <div class="head-menu">
    <div class="head-logo">
      <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/li-loago.png" style="height:40px;margin-top:10px;" alt="">
    </div>
    <ul class="head-menu-box">
      <li class="login-out" @click="outLogin()">退出</li>
      <li class="head-menu-notice" v-if="!edit">
        <el-popover placement="bottom-start" title="新消息" width="300" trigger="click" @show="showMsg">
          <info-bell></info-bell>
          <el-badge is-dot class="item" slot="reference">
            <i class="el-icon-bell"></i>
          </el-badge>
        </el-popover>
      </li>
      <li class="nick-name">{{user_info.MemberName}}</li>
      <li>
        <el-image
          style="margin-top:15px;width:30px;height:30px;border-radius:50%;"
          :src="user_info.Avatar"
        ></el-image>
      </li>
      <li>
        <span>认证状态：</span>
        <router-link to="/manage/setting/teamcation">
          <el-link type="warning" :underline="false">{{['未认证','个人认证','企业认证','组织认证'][cation]}}</el-link>
          <!-- <el-link type="success" :underline="false">已认证</el-link> -->
        </router-link>
      </li>

      <li class="search-menu-box">
        <el-button class="com-btn" size='mini' icon="el-icon-back" v-if="edit" @click="backActive">返回活动列表</el-button>
        <el-select
          class="search-menu"
          v-model="search"
          filterable
          remote
          reserve-keyword
          placeholder="请输入菜单名称"
          :remote-method="remoteMethod"
          :loading="loading"
          v-if="!edit"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </li>
    </ul>
  </div>
</template>

<script>
import infoBell from "./bell.vue";

export default {
  props : {edit : {}},
  components: { infoBell },
  data() {
    return {
      options: [],
      search: "",
      list: [],
      loading: false,
      states: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ],
      user_info : JSON.parse(window.localStorage.getItem('user_info')),
      cation : window.localStorage.getItem('cation')
    };
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: item, label: item };
    });
  },
  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    //返回活动列表
    backActive(){
      this.$router.push({
        path : '/manage/active/list'
      });
    },
    //退出登录
    outLogin(){
      this.$confirm('是否确定退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.ajaxs('login/outLogin',{
            success:(res) => {
              this.toast(res.code,res.msg);
              setTimeout(()=>{
                location.reload();
              },500);
            }
          });
        }).catch(() => {      
        });
    },
    //显示
    showMsg(){
      this.ajaxs('index/setBellRead',{
        success:(res) =>{}
      });
    },
  }
};
</script>

<style scoped>
@import url("../../assets/css/app/head.css");
</style>